<template>
  <div ref="div1Ref"></div>
  <div>
    <span>单文件上传</span>
    <input type="file" name="" value="" @change="fileChange" />
  </div>
  <img ref="imgRef" :src="base64Url" alt="" />
  <button @click="addFilter">添加滤镜</button>
</template>

<script setup>
/**
 * 对图片压缩的步骤：
 * 1. 用 canvas 的 drawImage 绘制图片
 * 2. 转化成 toBlob 或者 toDataURL, 然后压缩
 */
import { ref, nextTick } from "vue";
import { saveAs } from "file-saver";

let base64Url = ref("");
let imgRef = ref(null);
let div1Ref = ref(null);
let host = "/api";
// 单文件
const fileChange = (e) => {
  let file = e.target.files[0];
  let fr = new FileReader();
  fr.readAsDataURL(file);
  fr.onload = function () {
    base64Url.value = fr.result;
  };
};
const addFilter = () => {
    // 首先创建canvas标签
    let filterCanvas = document.createElement('canvas')
    // 设置canvas标签的宽高
    filterCanvas.width = imgRef.value.width
    filterCanvas.height = imgRef.value.height
    // 创建二维画布
    let ctx = filterCanvas.getContext('2d')
    // drawImage绘制图片
    ctx.drawImage(imgRef.value, 0, 0, imgRef.value.width, imgRef.value.height)
    // 获取canvas绘制以后的图片数据（里面有每四个为一组的rgba像素）
    let imageData = ctx.getImageData(0, 0, imgRef.value.width, imgRef.value.height)
    // 遍历rgba,将其中的b都设置为0，它是索引值为2的倍数的位置，然后拿到最新的imageData
    let _len = imageData.data.length
    for(let i = 0; i < _len; i++){
        if(i % 2 === 0) {
            imageData.data[i] = 0
        }
    }
    // 然后清空现在的画布
    ctx.clearRect(0, 0, imgRef.value.width, imgRef.value.height)
    // 重新绘制最新的像素
    ctx.putImageData(imageData, 0, 0)
    // 然后可以选择下载最新绘制的滤镜图片
    // filterCanvas.toBlob((blob) => {
    //     saveAs(blob, 'filter')
    // }, 'image/jpeg', 1)
    
    // 或者直接显示到页面上
    div1Ref.value.append(filterCanvas)
}

</script>

<style lang="less" scoped></style>
